<template>
	<view class="content">
		<common-picker @confirm="handleConfirm"></common-picker>
		<!--list-->
		<view class="list" v-if="list.length">
			<view class="item" v-for="(item,index) in list" :key="index">
				<u-checkbox v-model="item.checked" shape="circle" active-color="#0DA297"><view class="item-left">{{item.date_time}}</view></u-checkbox>
				<view class="list-right" @click="handleClick(index)">
					<view>{{item.title}}</view>	
				</view>
			</view>
		</view>
		<no-data :src="noDataSrc" :txt="noDataTxt" v-else></no-data>
		<view class="bottom-safe-area"></view>
		
		<common-drag />
		
		<view class="bottom-operation">
			<view class="operation-title" v-if="!allChecked"><text class="special">{{num}}</text><text>个记录，共</text><text class="special">{{price}}</text><text>元</text></view>
			<view class="operation-title" v-else><text class="special">{{allNum}}</text><text>个记录，共</text><text class="special">{{allPrice}}</text><text>元</text></view>
			<view>
				<u-checkbox @change="handleChange" :disabled="disabled" v-model="pageChecked" shape="circle" active-color="#0DA297">本页全选</u-checkbox>
				<u-checkbox @change="handleAllChange"  :disabled="disabled" v-model="allChecked" shape="circle" active-color="#0DA297">全部全选</u-checkbox>
				<view :class="{'btn':true,'is-next':isNext}"  @click="handleNext">
					下一步
				</view>
			</view>
			<view class="bottom-safe-area"></view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pickerTime:'',
				list: [],
				pageChecked:false,   
				isNext:false,//是否能下一步
				//全部
				allChecked:false,
				allNum:0,
				allPrice:0,
				//no-data
				noDataSrc:this.$noData,
				noDataTxt:'暂无充电记录',
				//back to the top
				scrollTop:0,
				
			}
		},
		computed:{
			num() {
				return this.list.filter(val=>val.checked).length;
			},
			price(){
				let list=this.list;
				let res=0;
				if(list.length){
					list.forEach(item=>{
						if(item.checked){
							res+=parseFloat(item.consume);
						};
					});
				};
				return res.toFixed(2);
			},
			disabled(){
				if(this.list.length){
					return false;
				}else{
					return true;
				}
			}
		},
		watch: {
			list: {
				handler(newVal) {
					
					if(newVal.length){
						
						let bool= newVal.every(val=>{
						    return val.checked==true;
						});
						
						if(bool){
							this.pageChecked=true;
						}else{
							this.pageChecked=false;
						};
						
						
						this.isNext=newVal.some(val=>val.checked);

					}else{
						this.isNext=false;
					}
				},
				deep: true
			},
		},
		//back to the top
		onPageScroll(e){
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.pickerTime = this.$u.timeFormat(new Date().getTime(),'yyyy-mm');
			this.getListRequest();
		},
		onShow(){
			
		},
		methods: {
			_reset(){
				this.isNext=false;
				this.list=[];
				this.pageChecked=false;
				this.allChecked=false; //reset全部全选
			},
			handleConfirm(time){
				this._reset();
				this.pickerTime=this.$u.timeFormat(time.pickerTime, 'yyyy-mm');
				this.getListRequest();
			},
			handleClick(i){
				this.list[i].checked=!this.list[i].checked;
			},
			handleChange(detail){
				if(detail.value){
					this.list.map(val=>{
						val.checked=true;
					})
				}else{
					this.list.map(val=>{
						val.checked=false;
					});
					this.allChecked=false; //reset全部全选
				};
			},
			handleNext(){
				let content='';
				if(this.allChecked){
					content=`您本次共选择记录${this.allNum}条，金额${this.allPrice}元，请确认。`;
				}else{
					content=`您本次共选择记录${this.num}条，金额${this.price}元，请确认。`;
				};
				
				
				if(this.isNext){	
					this.$utils.modal({
						content:content,
						callback:(bool)=>{
							if(bool){
								
								//传递数据:
								let arr=[];
								this.list.forEach(item=>{
									if(item.checked){
										arr.push(item.id);
									};
								});
								let ids=arr.toString();
								let all=this.allChecked?"1":"0";
								let	finalNum=this.allChecked?this.allNum:this.num;
								let finalPrice=this.allChecked?this.allPrice:this.price;
								//跳转至开发票页面,之前存这个页面数据
								uni.setStorage({
								    key: 'invoicePage',
								    data:{
										ids,all,finalNum,finalPrice
									},
								    success: function () {
								        uni.navigateTo({
								            url: `/pages/miscellaneous/invoice`
								        });
								    }
								});
								
							};
						}
					});
				}else{
					this.$utils.toast('您尚未选择充电记录');
				};
			},
			getListRequest(){
				this.$u.api.invoiceRecord({
					
					time:this.pickerTime,
				}).then(res=>{
					let list=res.data.list;
					list.forEach(item=>{
						item.checked=false;
					});
					this.list=list;
				}).catch();				
			},
			handleAllChange(detail){
				if(detail.value){
					this.$u.api.allRecord().then(res=>{
						if(res.result_code==1000){
							//设置全选时候的金额和订单数量
							this.allNum=res.data.total_num;
							this.allPrice=parseFloat(res.data.total_money).toFixed(2);
							
							this.list.map(val=>{
								val.checked=true;
							});
						}else{
							this.$utils.modal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							});
							this.allChecked=false;
						}
						
					}).catch();
				}else{
					
					this.list.map(val=>{
						val.checked=false;
					});
					
					this.allNum=0;
					this.allPrice=0;
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top:120rpx;
		padding-bottom: 200rpx;
	}
	// .list-left{
	// 	width:750rpx;
	// }
	.item{
		position: relative;
		padding:20rpx 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	.list .item:last-child{
		border:none;
	}
	.item-left{
		font-size: 26rpx;
	}
	.list-right{
		position: absolute;
		left:0;
		top:0;
		width:100%;
		z-index: 10;
		height:100%;
	}
	.list-right view{
		position: absolute;
		right:30rpx;
		top:50%;
		transform: translateY(-50%);
		font-size: 30rpx;
		color:#0DA297;
	}
	.list{
		border-top:1px solid #E5E5E5;
		border-bottom:1px solid #E5E5E5;
		background-color:#fff;
	}
	.bottom-operation{
		position: fixed;
		z-index: 20;
		bottom:0;
		left:0;
		width:100%;
		background-color:#fff;
	}
	.operation-title{
		border-top:1px solid #F3F3F3;
		border-bottom:1px solid #F3F3F3;
		padding:20rpx 30rpx;
		font-size: 26rpx;
		color:#333;
	}
	.bottom-operation>view:nth-child(2){
		position: relative;
		padding:22rpx 30rpx;
	}
	.operation-title .special{
		color:#0DA297;
		
	}
	.btn{
		position: absolute;
		right:0;
		bottom:0;
		background-color: #0DA297;
		width:200rpx;
		height:100rpx;
		text-align: center;
		line-height: 98rpx;
		color:#fff;
		font-size:32rpx;
		background-color:#999;
	}
	.is-next{
		
		background-color: #0DA297;
	}
</style>
<style>
	page{
		background: #F9FBFC;
	}
</style>
